<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/res/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__STATIC__/res/adminui/dist/css/admin.css" media="all">
    <script charset="utf-8" src="__STATIC__/kindeditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="__STATIC__/kindeditor/lang/zh-CN.js"></script>
    <script>
        var UPLOAD_URL = '{:url("category/kindEditorUpload",["website_code"=>$websiteCode])}';
        // 富文本编辑器
        var FUNCTIONS  = [
            'source', '|',  'preview','code',  'paste',
            'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
            'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',  'clearhtml', 'quickformat', '|', 'fullscreen', '/',
            'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
            'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr','link', 'unlink'
        ];
    </script>
    <style>
        .form-submit{
            margin:0px 15px 0 15px;
            padding-top: 15px;
            padding-left: 15px;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 5;
            background: #fff;
            width: 100%;
        }
        .attribute-image-add,.attribute-image-reduce,.attribute-add,.attribute-reduce{
            cursor: pointer;
        }
        .pad15{
            padding-bottom: 65px;
        }
    </style>
</head>
<body style="margin-bottom: 50px;">
    <div class="layui-fluid" style="padding-top:0;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">

                    <div class="layui-card-header">
                        <div class="layui-col-xs11 layui layui-col-sm11 layui-col-md11 layui-col-lg11">{$category['title']} - 添加文档</div>
                        <div class="layui-col-xs1 layui-col-md1 layui-col-lg1">&nbsp;
                            <a href="javascript:window.location.reload(true);" title="刷新" style="float:right">
                                <i class="layui-icon layui-icon-refresh-3"></i>
                            </a>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form" lay-filter="">
                            <div class="layui-tab layui-tab-brief">

                                <ul class="layui-tab-title">
                                    <li class="layui-this">基本</li>
                                    <li>图集</li>
                                    {if ($category['hasImageAttribute'] && count($category['attributes']) > 1) || !$category['hasImageAttribute'] && count($category['attributes']) > 0}
                                    <li>属性</li>
                                    {/if}
                                    {if $category.is_relation eq 1}
                                    <li>关联栏目</li>
                                    {/if}
                                </ul>

                                <div class="layui-tab-content">
                                    <!--基本-->
                                    <div class="layui-tab-item layui-show">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"><span style="color: #FF5722">*</span> 栏目</label>
                                            <div class="layui-input-block">
                                                <select name="category_id" lay-verify="required" lay-search="">
                                                    {if count($category.categories) gt 0}
                                                    {foreach $category.categories as $item}
                                                    <option value="{$item.id}" {if $category.module_id neq $item.module_id}disabled{elseif $category.id eq $item.id /}selected="selected"{/if}>{$item.title}</option>
                                                    {/foreach}
                                                    {/if}
                                                </select>
                                            </div>
                                        </div>

                                        {foreach $fields as $field}
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">{if $field.is_require eq 1}<span style="color: #FF5722">*</span>{/if} {$field.name}</label>
                                            <div class="layui-input-block">
                                                {if $field.field_type eq "radio"}
                                                <input type="radio"
                                                       {if $field.is_system eq 1}
                                                       name="{$field.code}"
                                                       {else /}
                                                name="extend[{$field.code}]"
                                                {/if}
                                                value="1" title="启用" checked>
                                                <input type="radio"
                                                       {if $field.is_system eq 1}
                                                       name="{$field.code}"
                                                       {else /}
                                                name="extend[{$field.code}]"
                                                {/if}
                                                value="2" title="禁用">
                                                {/if}

                                                {if $field.field_type eq "image"}
                                                <button type="button" class="layui-btn" id="{$field.code}-upload">
                                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                                </button>

                                                <input type="hidden"  name="{if $field.is_system eq 1}{$field.code}{else /}extend[{$field.code}]{/if}"
                                                       id="{$field.code}-url"/>
                                                {/if}

                                                {if $field.field_type eq "file"}
                                                <button type="button" class="layui-btn" id="{$field.code}-file">
                                                    <i class="layui-icon">&#xe67c;</i>上传文件
                                                </button>
                                                <input type="hidden"  name="extend[{$field.code}]" id="{$field.code}-value"/>
                                                {/if}

                                                {if $field.field_type eq "input" || $field.field_type eq "datetime" || $field.field_type eq "date"}
                                                    <input type="text" id="{$field.code}" placeholder="请输入{$field.name}"
                                                           autocomplete="off" class="layui-input"
                                                           {if $field.is_system eq 1} name="{$field.code}" {else /} name="extend[{$field.code}]" {/if}
                                                           {if $field.is_require eq 1} lay-verify="required" {/if}
                                                           {if $field.code eq 'sort'} value='{$sort}' {/if}
                                                           {if $field.code eq 'hit'} value='100' {/if}
                                                           {if $field.field_type eq 'date'} value='{:date('Y-m-d')}' {/if}
                                                           {if $field.field_type eq 'datetime'} value='{:date('Y-m-d H:i:s')}' {/if}
                                                    >
                                                {/if}

                                                {if $field.field_type eq 'editor'}
                                                <script>
                                                    KindEditor.ready(function(K) {
                                                        K.create('#{$field.code}',{
                                                            width:'100%',
                                                            height:'300px',
                                                            uploadJson:UPLOAD_URL,
                                                            items: FUNCTIONS,
                                                            //filterMode:false, // 标签过滤
                                                            afterBlur: function(){
                                                                this.sync();
                                                            },
                                                            cssData:'.ke-content table td,.ke-content table th {border:1px dashed #ccc;padding-left:5px} .ke-content table{width:100%}'
                                                        });
                                                    });
                                                </script>
                                                {/if}
                                                {if $field.field_type eq "textarea" || $field.field_type eq "editor" || $field.field_type eq "map"}
                                                <textarea type="text" id="{$field.code}" placeholder="请输入{$field.name}" autocomplete="off" class="layui-textarea"
                                                    {if $field.is_system eq 1}
                                                        name="{$field.code}"
                                                    {else /}
                                                        name="extend[{$field.code}]"
                                                    {/if}

                                                    {if $field.is_require eq 1}
                                                        lay-verify="required"
                                                    {/if}

                                                    {if $field.field_type eq "editor"}
                                                        lay-verify="{$field.code}"
                                                    {/if}
                                                ></textarea>
                                                {/if}
                                            </div>
                                        </div>

                                        {if $field.field_type eq "image"}
                                        <div class="layui-form-item {$field.code}-url">
                                            <label class="layui-form-label">
                                                &nbsp;
                                                <a href="javascript:;" title="点击删除">
                                                    <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
                                                </a>
                                            </label>
                                            <div id="{$field.code}-show"></div>
                                        </div>
                                        {/if}

                                        {if $field.field_type eq "file"}
                                        <div class="layui-form-item {$field.code}-file">
                                            <label class="layui-form-label">
                                                &nbsp;
                                                <a href="javascript:;" title="点击删除">
                                                    <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
                                                </a>
                                            </label>
                                            <div id="{$field.code}-show">
                                                <img src="__STATIC__/icon/rar.png" alt="" style="width:30px;display: none;margin-top: 3px">
                                                &nbsp;
                                                <span class="download"></span>
                                            </div>
                                        </div>
                                        {/if}

                                        {/foreach}
                                    </div>

                                    <!--图集-->
                                    {if !$category['hasImageAttribute']}
                                    <div class="layui-tab-item">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">图片 &nbsp;</label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn" id="images-upload">
                                                    <i class="layui-icon">&#xe67c;</i>图片上传
                                                </button>
                                            </div>
                                        </div>

                                        <div id="images">
                                        </div>
                                    </div>
                                    {else /}
                                    <div class="layui-tab-item image-tab">
                                        {foreach $category.attributes as $attribute}
                                        {if $attribute.attribute_type eq 2}

                                        <input type="hidden" name="image_attribute_id" value="{$attribute.id}" />
                                        <div class="attribute-image-item">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label" style="width: 152px">
                                                    <span attribute-id="{$attribute.id}" class="attribute-image-add">[ + ]</span>&nbsp;&nbsp;{$attribute.name}
                                                </label>
                                                <div class="layui-input-inline">
                                                    <select name="image_attribute_value_id[{$attribute.id}][]" class="attribute-value-id">
                                                        <option value="">请选择</option>
                                                        {foreach $attribute.values as $value}
                                                        <option value="{$value.id}">{$value.remark}</option>
                                                        {/foreach}
                                                    </select>
                                                </div>

                                                <div class="layui-input-inline">
                                                    <button type="button" class="layui-btn attribute-image-upload" id="attribute-image-upload-0">
                                                        <i class="layui-icon">&#xe67c;</i>图片上传
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="attribute-images">
                                            </div>
                                        </div>

                                        {/if}
                                        {/foreach}
                                    </div>
                                    {/if}

                                    <!--属性-->
                                    {if ($category.hasImageAttribute && count($category.attributes) > 1) || !$category.hasImageAttribute && count($category.attributes) > 0}
                                    <div class="layui-tab-item">
                                        <div class="layui-collapse">
                                            {foreach $category.attributes as $attribute}
                                            {if $attribute.attribute_type eq 1}
                                            <div class="layui-colla-item">
                                                <h2 class="layui-colla-title">{$attribute.name}</h2>
                                                <div class="layui-colla-content layui-show">
                                                    <div class="layui-form-item attribute-item">
                                                        <label class="layui-form-label" >
                                                            <span class="attribute-add">[ + ]</span>&nbsp;&nbsp;
                                                        </label>
                                                        <div class="layui-input-inline">
                                                            <select name="attribute_value_id[{$attribute.id}][]" class="attribute-value-id" lay-search="">
                                                                <option value="">请选择</option>
                                                                {foreach $attribute.values as $value}
                                                                <option value="{$value.id}">{$value.remark}</option>
                                                                {/foreach}
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {/if}
                                            {/foreach}

                                        </div>

                                    </div>
                                    {/if}

                                    <!--关联栏目-->
                                    {if $category.is_relation eq 1}
                                    <div class="layui-tab-item">

                                    </div>
                                    {/if}

                                </div>
                            </div>

                            <div class="form-submit">
                                <div class="layui-form-item">

                                    <div class="layui-input-block">
                                        <input type="hidden" name="has_image_attribute" value="{$category['hasImageAttribute']}" />
                                        <input type="hidden" name="website_code" value="{$websiteCode}" />
                                        <input class="layui-btn" lay-submit lay-filter="layuiadmin-app-form-submit"
                                               id="layuiadmin-app-form-edit" value="保存" type="button">
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                        <button class="layui-btn layui-btn-primary lay-back" >返回</button>
                                    </div>

                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    var ARTICLE_DO_ADD_URL='{:url("article/doAdd")}';
    var ARTICLE_UPLOAD_URL = '{:url("article/upload",["website_code"=>$websiteCode])}'
</script>
<script src="__STATIC__/res/layui/layui.js"></script>
<script>
    layui.config({
        base: '__STATIC__/res/' //静态资源所在路径
    }).use(['index','upload','laydate', 'form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,element = layui.element
            ,laydate = layui.laydate
            ,upload = layui.upload;

        $('.lay-back').click(function (event){
            event.preventDefault();
            window.location.href = '{:url("article/lists",["website_code"=>$websiteCode,"category_id"=>$categoryId])}'
        })

        function uploadImage(fieldName,uploadUrl){
            var uploadInst = upload.render({
                elem: '#'+fieldName+'-upload'
                ,url: uploadUrl
                , before: function(){
                    layer.load();
                }
                ,done: function(res){
                    if(res.result.status){
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        layer.closeAll('loading');
                        return ;
                    }

                    //上传完毕回调
                    $('#'+fieldName+'-show').html("<img src='" + res.result.data.fullPath + "' style='height:100px'>")
                    $('#'+fieldName+'-url').val(res.result.data.path)
                    $('.'+fieldName+'-url i').show()
                    layer.closeAll('loading');
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });

            $('.'+fieldName+'-url').on('click','i',function(){
                $(this).hide()
                $(this).parents('.layui-form-item').find('#'+fieldName+'-show img').remove();
                $(this).parents('.layui-form-item').prev('.layui-form-item').find('#'+fieldName+'-url').val('')
            })
        }

        function uploadFile(fieldName,uploadUrl){
            var uploadInst = upload.render({
                elem: '#'+fieldName+'-file'
                ,url: uploadUrl
                , before: function(){
                    layer.load();
                }
                ,accept:'file'
                ,exts:'{$exts}'
                ,done: function(res){
                    if(res.result.status){
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        layer.closeAll('loading');
                        return ;
                    }

                    //上传完毕回调
                    $('#'+fieldName+'-show .download').html("<a href='"+res.result.data.fullPath+"' target='_blank'>点击下载</a>")
                    $('#'+fieldName+'-show img').show()
                    $('#'+fieldName+'-value').val(res.result.data.path)
                    $('.'+fieldName+'-file i').show()
                    layer.closeAll('loading');
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });

            $('.'+fieldName+'-file').on('click','i',function(){
                $(this).hide()
                $(this).parents('.layui-form-item').find('#'+fieldName+'-show .download').html('');
                $(this).parents('.layui-form-item').find('#'+fieldName+'-show img').hide();
                $(this).parents('.layui-form-item').prev('.layui-form-item').find('#'+fieldName+'-value').val('')
            })
        }

        // 图集
        upload.render({
            elem: '#images-upload' //绑定元素
            , url: ARTICLE_UPLOAD_URL //上传接口
            , before: function(){
                layer.load();
            }
            , done: function (res) {
                if (res.result.status) {
                    layer.msg(res.msg,{icon: 2, time: 1000});
                    layer.closeAll('loading', {time: 1000, anim: 0});
                    return;
                }

                //上传完毕回调
                var imageHtml = `
                 <div class="layui-form-item image-delete">
                    <label class="layui-form-label">
                        &nbsp;
                        <a href="javascript:;" title="点击删除">
                            <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;"></i>
                        </a>
                    </label>
                    <div class="image-show">
                         <div class="layui-col-lg1 layui-col-md1 layui-col-xs1 layui-col-sm1">
                            <img src="${res.result.data.fullPath}" style="width:120px">
                            <input type="hidden" name="images[]" value="${res.result.data.path}"/>
                        </div>
                       <div class="layui-col-lg3 layui-col-md3 layui-col-xs3 layui-col-sm3">
                            <label class="layui-form-label">说明</label>
                            <div class="layui-input-block">
                                <input type="text" autocomplete="off" class="layui-input" value="${res.result.data.title}" name="image_titles[]" >
                            </div>
                        </div>
                    </div>
                </div>
                `;
                $('#images').append(imageHtml)
                layer.closeAll('loading');
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading');
            }
        });
        $('#images').on('click','.image-delete i',function(){
            $(this).parents('.image-delete').remove()
        })

        $('.form-submit').css('width',$('.layui-fluid').width()+'px')
        window.onresize = function (){
            $('.form-submit').css('width',$('.layui-fluid').width()+'px')
        }

        // 属性
        $('.attribute-add').on('click',function(){
            var attributeItem = $(this).parents('.attribute-item').clone();
            attributeItem.find('.attribute-add').removeClass('attribute-add').addClass('attribute-reduce').html('[ - ]');
            attributeItem.appendTo($(this).parents('.layui-colla-content'));
            form.render();
        });
        $('.layui-colla-content').on('click','.attribute-reduce',function(){
            $(this).parents('.attribute-item').remove()
        });


        // 属性图片
        {if $category['hasImageAttribute']}

            function attributeImageUpload(element,attributeId){
                upload.render({
                    elem:element //绑定元素
                    , url: ARTICLE_UPLOAD_URL //上传接口
                    , before: function(){
                        layer.load();
                    }
                    , done: function (res) {
                        var attributeValueId =  $(this.item).parents('.layui-form-item').find('.attribute-value-id').find('option:selected').val()
                        console.log(attributeValueId)

                        //上传完毕回调
                        var imageHtml = `
                         <div class="layui-form-item image-delete">
                            <label class="layui-form-label">
                                &nbsp;
                                <a href="javascript:;" title="点击删除">
                                    <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;"></i>
                                </a>
                            </label>
                            <div class="image-show">
                                 <div class="layui-col-lg1 layui-col-md1 layui-col-xs1 layui-col-sm1">
                                    <img src="${res.result.data.fullPath}" style="width:120px">
                                    <input type="hidden" name="image_attribute_url[${attributeId}][${attributeValueId}][]" value="${res.result.data.path}"/>
                                </div>
                               <div class="layui-col-lg3 layui-col-md3 layui-col-xs3 layui-col-sm3">
                                    <label class="layui-form-label">说明</label>
                                    <div class="layui-input-block">
                                        <input type="text" autocomplete="off" class="layui-input" value="${res.result.data.title}" name="image_attribute_text[${attributeId}][${attributeValueId}][]" >
                                    </div>
                                </div>
                            </div>
                        </div>
                        `;
                        $(this.item).parents('.attribute-image-item').find('.attribute-images').append(imageHtml)
                        layer.closeAll('loading');
                    }
                    , error: function () {
                        //请求异常回调
                        layer.closeAll('loading');
                    }
                });
            }

            $('.image-tab').on('click','.image-delete i',function(){

                $(this).parents('.image-delete').remove()
            });

            // 属性图片
            var attributeImageItemLength = $('.attribute-image-item').length
            $('.attribute-image-add').on('click',function(){
                var attributeId = $(this).attr('attribute-id')
                attributeImageItemLength++
                var attributeImageItem = $(this).parents('.attribute-image-item').clone();
                attributeImageItem.find('.attribute-image-add').removeClass('attribute-image-add').addClass('attribute-image-reduce').html('[ - ]');
                attributeImageItem.find('.attribute-images').html('');
                attributeImageItem.find('.attribute-image-upload').attr('id','attribute-image-upload-'+ attributeImageItemLength)
                attributeImageItem.appendTo($(this).parents('.layui-tab-item'));
                form.render();

                attributeImageUpload('#attribute-image-upload-'+attributeImageItemLength,attributeId)
            });

            $('.layui-tab-item').on('click','.attribute-image-reduce',function() {
                $(this).parents('.attribute-image-item').remove()
            });

            // 属性图片上传
            {if $category.attributes}
                {foreach $category.attributes as $attribute}
                    {if $attribute.attribute_type eq 2}
                        attributeImageUpload('#attribute-image-upload-0',{$attribute.id})
                    {/if}
                {/foreach}
            {/if}

       {/if}


        // 扩展字段
        {foreach $fields as $field}
            {if $field.field_type eq 'date'}
                // 日期
                laydate.render({
                    elem: '#{$field.code}'
                    , trigger: 'click'
                    , type: 'date'
                    , format: 'yyyy-MM-dd'
                    , position: 'fixed'
                    , closeStop: '#{$field.code}'
                });
            {/if}


            {if $field.field_type eq 'datetime'}
                // 日期
                laydate.render({
                    elem: '#{$field.code}'
                    , trigger: 'click'
                    , type: 'datetime'
                    , format: 'yyyy-MM-dd HH:mm:ss'
                    , position: 'fixed'
                    , closeStop: '#{$field.code}'
                });
            {/if}

            {if $field.field_type eq 'image'}
                // 图片上传
                uploadImage('{$field.code}',ARTICLE_UPLOAD_URL)
            {/if}

            {if $field.field_type eq 'file'}
                // 文件上传
                uploadFile('{$field.code}',ARTICLE_UPLOAD_URL)
            {/if}

        {/foreach}





        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                method: 'post',
                data: field,
                url: ARTICLE_DO_ADD_URL,
                success: function (res) {
                    if (res.result.status) {
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        return
                    }

                    layer.msg(res.result.msg, {
                        offset: '15px'
                        , icon: 1
                        , time: 1000
                    },function (){
                        window.location.href = '{:url("article/lists")}?website_code={$websiteCode}&category_id={$categoryId}'
                    });
                }
            });
        });
    })
</script>
</body>
</html>